<template>
  <el-table
    ref="dataTable"
    :data="dataSource.list || []"
    :stripe="options.stripe"
    :border="options.border"
    :height="Tableheight"
    highlight-current-row
    @row-click="handlerowClick"
    @selection-change="handleSelectionChange"
    @row-dblclick="handlerowdbselected"
  >
    <!-- 选择框 -->
    <el-table-column
      v-if="options.selectType && options.selectType === 'checkbox'"
      type="selection"
      align="center"
      width="55"
    ></el-table-column>
    <!-- 序号 -->
    <el-table-column
      v-if="options.showIndex"
      type="index"
      label="序号"
      align="center"
      width="55"
    ></el-table-column>
    <!-- 数据 -->
    <template v-for="(column, index) in columns">
      <template v-if="column.scopedSlots">
        <el-table-column
          :key="index"
          :prop="column.prop"
          :label="column.label"
          :width="column.width"
          :align="column.align || 'center'"
        >
          <template #default="scope">
            <slot
              :name="column.scopedSlots"
              :index="scope.$index"
              :row="scope.row"
            ></slot>
          </template>
        </el-table-column>
      </template>

      <template v-else>
        <el-table-column
          :key="index"
          :prop="column.prop"
          :label="column.label"
          :fixed="column.fixed"
          :width="column.width"
          :align="column.align || 'center'"
        ></el-table-column>
      </template>
    </template>
  </el-table>

  <div class="pagintaion" v-if="showPagination">
    <el-pagination
      background
      :total="dataSource.totalCount || 0"
      :page-sizes="[10, 20, 50, 100]"
      v-model:page-size="pageSize"
      v-model:current-page="currentPage"
      :layout="layout"
    ></el-pagination>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  getCurrentInstance,
  nextTick,
  computed,
  watch,
  onMounted,
} from "vue";

const emit = defineEmits([
  "rowClick",
  "rowSelected",
  "rowdbselected",
  "folderClick",
]);
const props = defineProps({
  // 表格数据
  dataSource: Object,
  // 列配置
  columns: {
    type: Array,
    default: () => [],
  },
  showPagination: {
    type: Boolean,
    default: true,
  },
  showPageSize: {
    type: Boolean,
    default: true,
  },
  options: {
    type: Object,
    default: () => {
      return {
        extHight: 90,
        showIndex: true,
      };
    },
  },
  fetch: {
    type: Function,
    default: () => {},
  },
  filePid: {
    type: String,
    default: 0,
  },
  layout: {
    type: String,
    default: "total, sizes, prev, pager, next, jumper",
  },
  initFetch: {
    type: Boolean,
    default: true,
  },
});

const layout = computed(() => {
  return `total, ${
    props.showPageSize ? "sizes" : ""
  }, prev, pager, next, jumper`;
});

const dataTable = ref();

const Tableheight = computed(() => {
  return props.options.height
    ? `calc(100vh - ${props.options.extHight}px)`
    : "auto";
});
const handlerowClick = (row, column, event) => {
  if (row.folderType == 1) {
    loadFolderContent(row);
    emit("folderClick", row); // 新增文件夹点击事件
  }
  emit("rowClick", row, column, event);
};
const loadFolderContent = (row) => {
  // 主动选中该行
  dataTable.value.toggleRowSelection(row, true);

  // 更新 selectList
  if (!selectList.value.includes(row)) {
    selectList.value.push(row);
  }
};
const handlerowdbselected = (row) => {
  const index = selectList.value.indexOf(row);
  if (index === -1) {
    dataTable.value.toggleRowSelection(row, true); // 选中
  } else {
    dataTable.value.toggleRowSelection(row, false); // 取消选中
  }
  debugger;
  emit("rowdbselected", row); // 触发双击选中事件
};
const selectList = ref([]);
const handleSelectionChange = (selection) => {
  // 清空当前选中列表
  selectList.value = [];

  // 将新的选中项添加到选中列表
  selection.forEach((item) => {
    selectList.value.push(item);
  });

  emit("rowSelected", selection);
};

const init = () => {
  if (props.initFetch && props.fetch && props.filePid) {
    props.fetch(props.filePid);
  } else {
    props.fetch();
  }
};
onMounted(() => {
  init();
});
const clearSelect = () => {
  dataTable.value.clearSelection();
};
// 使用 v-model 绑定 currentPage 和 pageSize
const currentPage = ref(props.dataSource.pageNo);
const pageSize = ref(props.dataSource.pageSize);

watch(
  currentPage,
  (newVal) => {
    props.dataSource.pageNo = newVal;
    if (props.filePid !== "") {
      props.fetch(props.filePid, newVal);
    }
  },
  { deep: true, immediately: true }
);
watch(
  pageSize,
  (newVal) => {
    props.dataSource.pageSize = newVal;
    props.dataSource.pageNo = 1;
    if (props.filePid !== "") {
      props.fetch(props.filePid);
    }
  },
  { deep: true, immediately: true }
);
const setCurrentRow = (rowKey, rowValue) => {
  let row = props.dataSource.list.find((item) => item[rowKey] === rowValue);
  dataTable.value.setCurrentRow(row);
};
defineExpose({
  clearSelect,
  setCurrentRow,
});
</script>





<style  scoped lang="scss" >
.pagintaion {
  background-color: #fff;
  padding: 12px 0;
  border-radius: 0 0 8px 8px;
  box-sizing: border-box;
  margin-top: auto;
}
:deep(.el-table__empty-block) {
  min-height: 300px !important;
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-table--fit {
  flex-grow: 1;
}
:deep(.el-scrollbar) {
  height: 100%;
}
/* 表格样式优化 */
:deep(.el-table) {
  width: 100%;
  border-radius: 8px 8px 0 0;
  background-color: transparent;
  --el-table-border-color: #e5e7eb;
  --el-table-border: 1px solid var(--el-table-border-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  // 表头样式
  .el-table__header-wrapper {
    th {
      background-color: #f8fafc !important;
      color: #475569 !important;
      font-weight: 600 !important;
      height: 52px;
      padding: 12px 8px;
      border-bottom: 1px solid #e5e7eb;
    }
  }

  // 表格主体样式
  .el-table__body {
    width: 100% !important;
  }

  .el-table__inner-wrapper {
    overflow: visible !important;
    border-radius: 8px 8px 0 0;
    background-color: #fff;
  }

  .el-table__body-wrapper {
    overflow: visible !important;
    background-color: #fff;

    td {
      padding: 16px 8px;
      border-bottom: 1px solid #e5e7eb;
      color: #4b5563;
    }
  }

  // 行样式
  tr {
    cursor: pointer;
    transition: all 0.2s;

    &:hover > td {
      background-color: #f1f5f9 !important;
    }
  }

  // 选中行样式
  .current-row > td {
    background-color: #eff6ff !important;
    color: #3b82f6;
  }

  // 斑马纹
  .el-table__row--striped td {
    background-color: #f9fafb;
  }

  // 响应式处理
  @media screen and (max-width: 768px) {
    font-size: 13px;

    .el-table-column {
      min-width: auto !important;
    }
  }
}

/* 分页组件样式 */
:deep(.el-pagination) {
  padding: 10px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  background-color: #fff;
  box-sizing: border-box;
  .el-pagination__total,
  .el-pagination__sizes,
  .el-pagination__jump {
    margin-right: 12px;
    color: #6b7280;
  }

  .el-pagination__sizes .el-input .el-input__inner {
    font-size: 13px;
    height: 32px;
  }

  button {
    height: 32px;
    min-width: 32px;
    border-radius: 4px;
    transition: all 0.2s;

    &:not(:disabled):hover {
      color: #3b82f6;
      background-color: #eff6ff;
    }
  }

  .is-active {
    background-color: #3b82f6 !important;
  }

  @media screen and (max-width: 576px) {
    flex-direction: column;
    align-items: center;
    gap: 12px;

    .el-pagination__sizes,
    .el-pagination__total,
    .el-pagination__jump {
      margin: 0;
    }
  }
}

/* 操作按钮样式 */
:deep(.el-button) {
  padding: 8px 16px;
  font-size: 13px;
  border-radius: 6px;
  transition: all 0.2s;

  &:not(.is-disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  // 响应式
  @media screen and (max-width: 576px) {
    padding: 6px 12px;
    font-size: 12px;
  }
}

/* 表头单元格样式 */
:deep(.el-table__header-cell) {
  text-align: center !important;
  font-weight: 600 !important;
  color: #475569 !important;
  background-color: #f8fafc !important;
  padding: 12px 8px !important;
  height: 52px !important;
}

/* 选中效果 */
:deep(.el-table__column--selection) {
  .el-checkbox__inner {
    border-radius: 4px;
    &:hover {
      border-color: #3b82f6;
    }
  }
}
</style>
